<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用户登录</title>
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
		<meta name="viewport" content="width=device-width,minimum-scale=1.0">

		<link rel="stylesheet" type="text/css" href="css/login/login.css" />
		<script type="text/javascript" src="js/jquery.min.3.2.1.js"></script>
		<link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7/css/bootstrap.min.css" />
		<script type="text/javascript" src="js/bootstrap-3.3.7/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/utils/common.js"></script>
		<script src="js/utils/config.js"></script>
		<style type="text/css">
			.options {
				/*用div的样式代替select的样式*/
				float: left;
				width: 106px;
				height: 35px;
				margin-top: 50px;
				background: none;
				border: 1px solid #fff;
				color: #fff;
				font-size: 15px;
				letter-spacing: 2px;
				color: #fff;
				/*border-radius: 5px;*/
				/*盒子阴影修饰作用,自己随意*/
				/* box-shadow: 0 0 5px #ccc;*/
				position: relative;
			}

			.options select {
				/*清除select的边框样式*/
				background-color: rgba(70, 68, 67, 0.4);
				border: none;
				/*清除select聚焦时候的边框颜色*/
				outline: none;
				/*将select的宽高等于div的宽高*/
				width: 104px;
				height: 33px;
				line-height: 35px;
				/*隐藏select的下拉图标*/
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;
				/*通过padding-left的值让文字居中*/
				padding-left: 12px;
			}

			/*使用伪类给select添加自己想用的图标*/
			.options:after {
				background-color: transparent;
				content: "";
				width: 14px;
				height: 10px;
				/* background: url(./img/login/down.jpg) no-repeat center; */
				/*通过定位将图标放在合适的位置*/
				position: absolute;
				right: 20px;
				top: 41%;
				/*给自定义的图标实现点击下来功能*/
				pointer-events: none;
			}
		</style>
	</head>

	<body>
		<div class="login">
			<div style="width: 100%;height: 70px;">
				<img src="./img/login/icon.png" style="float:left;width: 60px;height: 60px;opacity:0.8;margin: 5px;">
				<!-- <div style="position:absolute;height:70px;font-family: '微软雅黑';font-size: 34px;color: #595757;letter-spacing: 10px;line-height: 70px;margin-left: 80px;">智慧社区云平台</div> -->
				<div style="text-align:center;height:70px;font-family: '微软雅黑';font-size: 34px;color: #595757;letter-spacing: 10px;line-height: 70px;">智慧社区云平台</div>
			</div>
			<div style="width:100%;height:300px;background:rgba(35, 24, 21, 0.4);">
				<div style="float: left; width: 400px;">
					<input id="username" type="text" placeholder="请输入账号" onclick="hideErrorInfo(true);" style="margin-left: 100px;width: 286px;height: 35px;margin-top: 50px;background:none;border: 1px solid #fff;color: #fff;font-size: 15px;letter-spacing: 2px;padding-left: 20px;color: #fff;" />
					<input id="password" type="password" placeholder="请输入密码" onclick="hideErrorInfo(true);" style="margin-left: 100px;width: 286px;height: 35px;margin-top: 30px;background:none;border: 1px solid #fff;color: #fff;font-size: 15px;padding-left: 20px;color: #fff;letter-spacing: 2px;" />

				</div>
				<div class="options">
					<select id="selectRole">
						<option value="0">选择角色 ﹀</option>
						<option id="tea" value="1">社区管理员</option>
						<option id="man" value="2">超级管理员</option>
					</select>
				</div>
				<div style="clear: both;"></div>
				<div style="width: 400px;height: 30px;margin:auto;margin-top: 20px;">
					<div style="float: left;">
						<label style="font-weight:normal;font-family: '微软雅黑';font-size: 15px;color: #EFEFEF;letter-spacing: 5px;cursor: pointer;">
							<input id="remember" type="checkbox" class="cbox">
							记住密码
						</label>
					</div>
					<div style="float: right;">
						<span id="errorinfo" style="float: left; text-align: left; width: 200px; color: red; display: none;">用户名或密码错误</span>
						<a id="iforget" onClick="alert('请联系管理员,电话17777777777');" style="font-family: '微软雅黑';font-size: 15px;color: #EFEFEF;cursor: pointer;letter-spacing: 5px;">忘记密码</a>
					</div>
				</div>
				<button id="login" type="button" class="btn btn-primary" style="margin-left: 98px;width: 400px;height: 35px;background-color: #58A7DD;border:none;margin-top:10px;font-size: 17px;letter-spacing: 10px;">登录</button>

			</div>
			<div style="width: 100%;height: 30px;margin-top: 20px;">
				<img src="./img/login/logo.png" style="width: 200px;clear: both; display: block; margin:auto;">
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.3.2.1.js"></script>
	<script type="text/javascript" src="js/layui/layui.js"> </script>

	<script>
		document.onkeydown = function(e) {
			e = e || window.event;
			if (e && e.keyCode == 13) {
				rquestLogin();
			}
		}
		init();

		/**
		 * 初始化
		 */
		function init() {
			hideErrorInfo(true);
		}

		/**
		 * 登陆按钮
		 */
		$("#login").on("click", function() {

			//请求登录
			rquestLogin();
		});

		/**
		 * 是否隐藏错误信息提示
		 * @param {Object} flag
		 */
		function hideErrorInfo(flag) {

			if (flag) {
				$("#errorinfo").hide();
			} else {
				$("#errorinfo").show();
			}

		}

		/**
		 * 请求登录
		 */
		function rquestLogin() {

			//获取用户名,密码,记住密码
			var mUsername = $("#username").val().trim();
			var mPassword = $("#password").val().trim();
			var mRemember = $("#remember").prop("checked");
			var mSelect = $("#selectRole").val();
			// alert(mSelect);

			//检查值
			var userError = checkValue("账号", mUsername, 50, true, true);
			var passError = checkValue("密码", mPassword, 50, true, true);
			if (userError !== null) {
				$("#errorinfo").text(userError);
				hideErrorInfo(false);
				return;
			}
			if (passError !== null) {
				$("#errorinfo").text(passError);
				hideErrorInfo(false);
				return;
			}

			var data = {
				"account": mUsername,
				"password": mPassword
			};
			data = JSON.stringify(data);
			if (mSelect == 1) {
				$.ajax({
					type: "post",
					url: ipPort + "u/login/do",
					async: true,
					xhrFields: {
						withCredentials: true
					},
					contentType: "application/json",
					data: data,
					dataType: "json",
					success: function(result) {
						console.log(result);
						if (result.code == 200) {
							//登陆成功, 跳转到主页面
							window.location = "index.html";
						} else {
							alert("登陆失败: " + result.msg);
						}
					},
					error: function(error) {
						alert("请求登陆出错: " + error.responseText);
					}
				});
			} else if (mSelect == 2) {
				setTimeout(function() {
					$.ajax({
						url: 'http://localhost:8090/super_community_manage/sys/sysPermission/getMenu?parentId=86c9e0f632f3443691ff554cc78628b9&menuFlag=1',
						// url: 'http://localhost:8090/super_community_manage/sys/sysPermission/getMenu?parentId=2&menuFlag=1',

						dataType: 'json',
						type: 'POST',
						data: $('#login_form').serialize(),
						success: function(data) {
							if (data.code === 200) {
								//ie下location的base属性无效
								// window.location = document.getElementsByTagName("base")[0].getAttribute("href")+ "sys/index";
								// window.location = "http://localhost:8090/super_community_manage/sys/index";
							} else {
								$.messager.show({
									title: '提示',
									msg: data.data
								});
							}
						},
						error: function(data) {}
					});
				}, 500);
			} else {
				confirm("请选择登陆角色！")
			}
		}
	</script>

</html>
